// DOM元素
const loginContainer = document.getElementById('loginContainer');
const chatContainer = document.getElementById('chatContainer');
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');
const loginBtn = document.getElementById('loginBtn');
const loginError = document.getElementById('loginError');
const currentUserSpan = document.getElementById('currentUser');
const logoutBtn = document.getElementById('logoutBtn');
const clearBtn = document.getElementById('clearBtn');
const userList = document.getElementById('userList');
const messageContainer = document.getElementById('messageContainer');
const toUserSelect = document.getElementById('toUser');
const messageInput = document.getElementById('messageInput');
const sendBtn = document.getElementById('sendBtn');
const onlineCountSpan = document.getElementById('onlineCount');

// WebSocket连接
let socket = null;

// 当前用户名
let currentUsername = '';

// 初始化应用
function init() {
    // 添加事件监听器
    loginBtn.addEventListener('click', handleLogin);
    logoutBtn.addEventListener('click', handleLogout);
    clearBtn.addEventListener('click', clearChatHistory);
    sendBtn.addEventListener('click', sendMessage);
    messageInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            sendMessage();
        }
    });
    
    // 设置初始placeholder
    messageInput.placeholder = '发送消息给所有人...';
    
    // 添加下拉框变化事件
    toUserSelect.addEventListener('change', function() {
        const selectedUser = this.value;
        selectUser(selectedUser);
    });

    // 初始化表情功能
    if (window.emojiUtils) {
        window.emojiUtils.initEmoji();
    }

    // 检查用户是否已登录
    checkLoginStatus();
}

// 清除聊天记录
function clearChatHistory() {
    // 清空消息容器
    messageContainer.innerHTML = '';
    
    // 添加一条系统消息
    displaySystemMessage('聊天记录已清除');
    
    // 如果需要，可以向服务器发送清除历史记录的请求
    if (socket && socket.readyState === WebSocket.OPEN) {
        const clearMessage = {
            toName: currentUsername,
            message: '/clear'
        };
        socket.send(JSON.stringify(clearMessage));
    }
}

// 检查用户登录状态
async function checkLoginStatus() {
    try {
        const response = await fetch('/user/getUsername', {
            credentials: 'include' // 确保发送cookie
        });
        const result = await response.json();
        
        if (result.code === 200 && result.data) {
            // 用户已登录
            currentUsername = result.data;
            showChatUI();
            connectWebSocket();
        }
    } catch (error) {
        console.error('检查登录状态失败:', error);
    }
}

// 处理登录
async function handleLogin() {
    const username = usernameInput.value.trim();
    const password = passwordInput.value.trim();
    
    // 验证输入
    if (!username) {
        showLoginError('请输入用户名');
        return;
    }
    
    if (!password) {
        showLoginError('请输入密码');
        return;
    }
    
    try {
        const response = await fetch('http://localhost:8080/user/login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            credentials: 'include', // 确保发送和接收cookie
            body: JSON.stringify({
                username: username,
                password: password
            })
        });
        
        const result = await response.json();
        
        if (result.code === 200) {
            // 登录成功
            currentUsername = username;
            showChatUI();
            // 登录成功后等待一小段时间再连接WebSocket，确保会话已完全建立
            setTimeout(() => {
                connectWebSocket();
            }, 500);
        } else {
            // 登录失败
            showLoginError(result.message || '登录失败');
        }
    } catch (error) {
        console.error('登录请求失败:', error);
        showLoginError('网络错误，请稍后重试');
    }
}

// 显示登录错误信息
function showLoginError(message) {
    loginError.textContent = message;
}

// 显示聊天界面
function showChatUI() {
    loginContainer.style.display = 'none';
    chatContainer.style.display = 'flex';
    currentUserSpan.textContent = currentUsername;
    
    // 清空输入框
    usernameInput.value = '';
    passwordInput.value = '';
    loginError.textContent = '';
    
    // 初始化消息输入框
    // messageInput.placeholder = '发送消息给所有人...';
    messageInput.focus();
    
    // 初始化下拉选择框
    toUserSelect.value = 'all';
    
    // 清除用户列表中的active类
    const userItems = userList.querySelectorAll('li');
    userItems.forEach(item => item.classList.remove('active'));
}

// 显示登录界面
function showLoginUI() {
    chatContainer.style.display = 'none';
    loginContainer.style.display = 'flex';
    
    // 清空聊天相关内容
    messageContainer.innerHTML = '';
    userList.innerHTML = '';
    toUserSelect.innerHTML = '<option value="all">所有人</option>';
    messageInput.value = '';
}

// 处理退出登录
async function handleLogout() {
    try {
        // 关闭WebSocket连接
        if (socket && socket.readyState === WebSocket.OPEN) {
            socket.close();
        }
        
        // 清除会话
        await fetch('/user/logout', {
            credentials: 'include' // 确保发送cookie
        });
        console.log('已发送退出登录请求');
        
        // 显示登录界面
        showLoginUI();
    } catch (error) {
        console.error('退出登录失败:', error);
    }
}

// 连接WebSocket
// 重试次数和延迟时间（毫秒）
let wsRetryCount = 0;
const MAX_RETRY_COUNT = 3;
const RETRY_DELAY = 2000;

function connectWebSocket() {
    try {
        // 确保先发送一个请求到后端，以确保会话已建立
        fetch('http://localhost:8080/user/getUsername', {
            credentials: 'include' // 确保发送cookie
        }).then(response => response.json())
        .then(result => {
            if (result.code === 200 && result.data) {
                // 创建WebSocket连接，并在URL中添加用户名参数
                const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
                const host = "localhost";
                const port = '8080';
                const username = result.data;
                
                // 添加用户名作为URL参数
                socket = new WebSocket(`${protocol}//${host}:${port}/chat?username=${encodeURIComponent(username)}`);
                console.log('正在连接WebSocket:', `${protocol}//${host}:${port}/chat?username=${encodeURIComponent(username)}`);
                
                // 连接打开时的处理
                socket.onopen = function() {
                    console.log('WebSocket连接已建立');
                    // 重置重试计数
                    wsRetryCount = 0;
                };
                
                // 设置其他WebSocket事件处理程序
                setupWebSocketEventHandlers();
            } else {
                console.error('无法获取用户名，WebSocket连接失败');
                retryWebSocketConnection();
            }
        }).catch(error => {
            console.error('获取用户会话失败:', error);
            retryWebSocketConnection();
        });
    } catch (error) {
        console.error('WebSocket连接初始化失败:', error);
        retryWebSocketConnection();
    }
}

// 重试WebSocket连接
function retryWebSocketConnection() {
    if (wsRetryCount < MAX_RETRY_COUNT) {
        wsRetryCount++;
        console.log(`WebSocket连接失败，${RETRY_DELAY/1000}秒后进行第${wsRetryCount}次重试...`);
        setTimeout(() => {
            connectWebSocket();
        }, RETRY_DELAY);
    } else {
        console.error(`WebSocket连接失败，已达到最大重试次数(${MAX_RETRY_COUNT})`);
        alert('聊天服务连接失败，请刷新页面重试');
    }
}

// 设置WebSocket事件处理程序
function setupWebSocketEventHandlers() {
    // 接收到消息时的处理
    socket.onmessage = function(event) {
        console.log('收到消息:', event.data);
        const data = JSON.parse(event.data);
        handleReceivedMessage(data);
    };
    
    // 连接关闭时的处理
    socket.onclose = function(event) {
        console.log('WebSocket连接已关闭，关闭码:', event.code);
        
        // 如果不是正常关闭（用户登出），尝试重连
        if (event.code !== 1000 && currentUsername) {
            console.log('WebSocket连接非正常关闭，尝试重连...');
            retryWebSocketConnection();
        }
    };
    
    // 连接发生错误时的处理
    socket.onerror = function(error) {
        console.error('WebSocket连接发生错误:', error);
        // 错误发生后，连接会自动关闭，onclose会被调用
    };
}

// 存储用户未读消息计数
const unreadCounts = {};

// 处理接收到的消息
function handleReceivedMessage(data) {
    if (data.isSystem) {
        // 系统消息
        if (Array.isArray(data.message)) {
            // 更新用户列表
            updateUserList(data.message);
        } else {
            // 显示系统消息
            displaySystemMessage(data.message);
            
            // 如果是历史消息提示，添加一个分隔线
            if (data.message.includes('历史消息')) {
                const separator = document.createElement('div');
                separator.className = 'history-separator';
                separator.innerHTML = '<hr><span>历史消息</span><hr>';
                messageContainer.appendChild(separator);
            }
        }
    } else {
        // 处理聊天消息
        const fromUser = data.fromName;
        const toUser = data.toName;
        const message = data.message;
        const timestamp = data.timestamp || new Date().toISOString();
        const isSent = fromUser === currentUsername;
        
        // 如果消息是当前用户发送的，不需要再次显示（因为发送时已经显示过了）
        // 但如果是历史消息（有timestamp且不是刚刚发送的），则需要显示
        const isRecent = !timestamp || (new Date() - new Date(timestamp) < 5000); // 5秒内的消息视为刚发送的
        
        // 处理群发消息
        let displayToUser = toUser;
        if (toUser === 'all') {
            displayToUser = '所有人';
        }
        
        // 判断是否需要显示消息
        // 1. 如果是历史消息，显示
        // 2. 如果是接收到的消息，显示
        // 3. 如果是刚发送的消息，已在发送时显示，不重复显示
        const shouldDisplay = !isSent || !isRecent || (isSent && toUser === currentUsername);
        
        if (shouldDisplay) {
            displayMessage(fromUser, message, isSent, displayToUser);
            
            // 更新时间显示
            const now = new Date();
            const timeStr = now.getHours().toString().padStart(2, '0') + ':' + 
                           now.getMinutes().toString().padStart(2, '0');
            
            // 如果是接收到的消息
            if (!isSent) {
                // 找到发送者的列表项并更新
                const senderItem = userList.querySelector(`li[data-username="${fromUser}"]`);
                if (senderItem) {
                    // 更新时间
                    const timeSpan = senderItem.querySelector('.last-time');
                    if (timeSpan) {
                        timeSpan.textContent = timeStr;
                    }
                    
                    // 如果是私聊消息且发给当前用户
                    if (toUser === currentUsername) {
                        // 添加一个临时的高亮效果
                        senderItem.classList.add('message-highlight');
                        
                        // 更新未读消息计数
                        if (!unreadCounts[fromUser]) {
                            unreadCounts[fromUser] = 0;
                        }
                        unreadCounts[fromUser]++;
                        
                        // 创建或更新未读消息计数元素
                        let unreadBadge = senderItem.querySelector('.unread-badge');
                        if (!unreadBadge) {
                            unreadBadge = document.createElement('span');
                            unreadBadge.className = 'unread-badge';
                            senderItem.appendChild(unreadBadge);
                        }
                        unreadBadge.textContent = unreadCounts[fromUser];
                        unreadBadge.style.display = 'block';
                        
                        // 2秒后移除高亮（但保留未读计数）
                        setTimeout(() => {
                            senderItem.classList.remove('message-highlight');
                        }, 2000);
                    }
                }
            } else if (isSent && toUser !== 'all') {
                // 如果是发送的私聊消息，更新接收者的时间
                const receiverItem = userList.querySelector(`li[data-username="${toUser}"]`);
                if (receiverItem) {
                    // 更新时间
                    const timeSpan = receiverItem.querySelector('.last-time');
                    if (timeSpan) {
                        timeSpan.textContent = timeStr;
                    }
                    
                    // 添加已发送效果
                    receiverItem.classList.add('message-sent');
                    setTimeout(() => {
                        receiverItem.classList.remove('message-sent');
                    }, 2000);
                }
            }
        }
    }
}

// 更新用户列表
function updateUserList(users) {
    // 保存当前选中的用户
    const selectedUser = toUserSelect.value;
    
    // 保存现有用户的未读消息计数和最后消息时间
    const existingUserData = {};
    const userItems = userList.querySelectorAll('li');
    userItems.forEach(item => {
        const username = item.dataset.username;
        if (username) {
            existingUserData[username] = {
                unreadCount: unreadCounts[username] || 0,
                lastTime: item.querySelector('.last-time')?.textContent || '',
                element: item
            };
        }
    });
    
    // 清空下拉选择框，保留"所有人"选项
    toUserSelect.innerHTML = '<option value="all">所有人</option>';
    
    // 去重用户列表并排除当前用户
    const uniqueUsers = [...new Set(users)].filter(username => username !== currentUsername);
    
    // 更新在线用户数量
    const onlineCount = uniqueUsers.length;
    onlineCountSpan.textContent = `(${onlineCount})`;
    
    // 创建新的用户列表HTML
    const fragment = document.createDocumentFragment();
    
    // 添加用户到列表
    uniqueUsers.forEach(username => {
        // 创建或复用用户列表项
        let li;
        if (existingUserData[username]) {
            // 如果用户已存在，复用现有元素
            li = existingUserData[username].element;
            // 从DOM中移除，稍后会重新添加到正确位置
            if (li.parentNode) {
                li.parentNode.removeChild(li);
            }
        } else {
            // 创建新的用户列表项
            li = document.createElement('li');
            
            // 创建用户名元素
            const nameSpan = document.createElement('span');
            nameSpan.className = 'user-name';
            nameSpan.textContent = username;
            li.appendChild(nameSpan);
            
            // 创建最后消息时间元素
            const timeSpan = document.createElement('span');
            timeSpan.className = 'last-time';
            const now = new Date();
            timeSpan.textContent = now.getHours().toString().padStart(2, '0') + ':' + 
                                  now.getMinutes().toString().padStart(2, '0');
            li.appendChild(timeSpan);
            
            // 设置数据属性
            li.dataset.username = username;
            li.addEventListener('click', () => selectUser(username));
            
            // 如果有未读消息，添加未读消息徽章
            if (unreadCounts[username] && unreadCounts[username] > 0) {
                const unreadBadge = document.createElement('span');
                unreadBadge.className = 'unread-badge';
                unreadBadge.textContent = unreadCounts[username];
                unreadBadge.style.display = 'block';
                li.appendChild(unreadBadge);
            }
        }
        
        // 添加到文档片段
        fragment.appendChild(li);
        
        // 添加到下拉选择框
        const option = document.createElement('option');
        option.value = username;
        option.textContent = username;
        toUserSelect.appendChild(option);
    });
    
    // 清空并重新填充用户列表
    userList.innerHTML = '';
    userList.appendChild(fragment);
    
    // 恢复选中的用户
    if (selectedUser && toUserSelect.querySelector(`option[value="${selectedUser}"]`)) {
        toUserSelect.value = selectedUser;
        const selectedItem = userList.querySelector(`li[data-username="${selectedUser}"]`);
        if (selectedItem) {
            selectedItem.classList.add('active');
        }
    }
    
    // 显示系统消息
    const message = `当前在线用户: ${uniqueUsers.length}人`;
    displaySystemMessage(message);
}

// 选择用户
function selectUser(username) {
    // 更新下拉选择框的值
    toUserSelect.value = username;
    
    // 移除所有用户列表项的active类
    const userItems = userList.querySelectorAll('li');
    userItems.forEach(item => item.classList.remove('active'));
    
    // 为选中的用户添加active类
    const selectedItem = userList.querySelector(`li[data-username="${username}"]`);
    if (selectedItem) {
        selectedItem.classList.add('active');
        
        // 清除未读消息计数
        if (unreadCounts[username]) {
            unreadCounts[username] = 0;
            
            // 隐藏未读消息徽章
            const unreadBadge = selectedItem.querySelector('.unread-badge');
            if (unreadBadge) {
                unreadBadge.style.display = 'none';
            }
        }
    }
    
    // 更新消息输入框的placeholder
    messageInput.placeholder = `发送消息给 ${username}...`;
    messageInput.focus();
}

// 发送消息
function sendMessage() {
    const message = messageInput.value.trim();
    const toUser = toUserSelect.value;
    
    if (!message) {
        return;
    }
    
    // 检查WebSocket连接状态
    if (!socket || socket.readyState !== WebSocket.OPEN) {
        displaySystemMessage('聊天服务连接已断开，正在尝试重新连接...');
        console.error('WebSocket连接未建立或已断开');
        
        // 尝试重新连接
        if (wsRetryCount === 0) { // 避免多次重连
            retryWebSocketConnection();
        }
        return;
    }
    
    // 构造消息对象
    const messageObj = {
        toName: toUser,
        message: message
    };
    
    // 发送消息
    try {
        socket.send(JSON.stringify(messageObj));
        
        // 如果是群发消息，显示为发送给"所有人"
        const displayToUser = toUser === 'all' ? '所有人' : toUser;
        
        // 显示已发送的消息
        displayMessage(currentUsername, message, true, displayToUser);
        
        // 清空输入框
        messageInput.value = '';
        
        // 如果是私聊，高亮显示接收者
        if (toUser !== 'all') {
            const receiverItem = userList.querySelector(`li[data-username="${toUser}"]`);
            if (receiverItem) {
                // 添加一个临时的高亮效果
                receiverItem.classList.add('message-sent');
                setTimeout(() => {
                    receiverItem.classList.remove('message-sent');
                }, 1000); // 1秒后移除高亮
            }
        }
        
        // 如果是群发消息，更新输入框提示
        if (toUser === 'all') {
            messageInput.placeholder = '发送消息给所有人...';
        }
    } catch (error) {
        console.error('发送消息失败:', error);
        displaySystemMessage('消息发送失败，请检查网络连接');
    }
}

// 显示消息
function displayMessage(username, message, isSent, toUser = null) {
    const messageDiv = document.createElement('div');
    messageDiv.className = `message ${isSent ? 'sent' : 'received'}`;
    
    // 如果是群发消息，添加特殊类
    if (toUser === '所有人') {
        messageDiv.classList.add('broadcast');
    }
    
    const messageInfo = document.createElement('div');
    messageInfo.className = 'message-info';
    
    // 添加时间戳
    const now = new Date();
    const timeStr = now.getHours().toString().padStart(2, '0') + ':' + 
                   now.getMinutes().toString().padStart(2, '0');
    
    // 创建时间戳元素
    const timestampSpan = document.createElement('span');
    timestampSpan.className = 'timestamp';
    timestampSpan.textContent = timeStr;
    messageInfo.appendChild(timestampSpan);
    
    // 显示发送者和接收者信息
    if (isSent) {
        const fromSpan = document.createElement('span');
        fromSpan.textContent = '你';
        fromSpan.className = 'sender';
        messageInfo.appendChild(fromSpan);
        
        if (toUser) {
            const directionSpan = document.createElement('span');
            directionSpan.className = 'direction';
            directionSpan.textContent = ' → ';
            messageInfo.appendChild(directionSpan);
            
            const toSpan = document.createElement('span');
            toSpan.textContent = toUser;
            toSpan.className = 'receiver';
            
            // 如果是群发消息，添加特殊样式
            if (toUser === '所有人') {
                toSpan.classList.add('broadcast-receiver');
            }
            
            messageInfo.appendChild(toSpan);
        }
    } else {
        const fromSpan = document.createElement('span');
        fromSpan.textContent = username;
        fromSpan.className = 'sender';
        messageInfo.appendChild(fromSpan);
        
        // 如果是群发消息，显示"发送给所有人"
        if (toUser === '所有人') {
            const directionSpan = document.createElement('span');
            directionSpan.className = 'direction';
            directionSpan.textContent = ' → ';
            messageInfo.appendChild(directionSpan);
            
            const toSpan = document.createElement('span');
            toSpan.textContent = toUser;
            toSpan.className = 'receiver broadcast-receiver';
            messageInfo.appendChild(toSpan);
        }
        // 如果是私聊消息且接收者是当前用户，显示"发送给你"
        else if (toUser === currentUsername) {
            const directionSpan = document.createElement('span');
            directionSpan.className = 'direction';
            directionSpan.textContent = ' → ';
            messageInfo.appendChild(directionSpan);
            
            const toSpan = document.createElement('span');
            toSpan.textContent = '你';
            toSpan.className = 'receiver';
            messageInfo.appendChild(toSpan);
        }
    }
    
    const messageBubble = document.createElement('div');
    messageBubble.className = 'message-bubble';
    
    // 处理消息中的表情符号
    if (window.emojiUtils && window.emojiUtils.formatMessageWithEmojis) {
        messageBubble.innerHTML = window.emojiUtils.formatMessageWithEmojis(message);
    } else {
        messageBubble.textContent = message;
    }
    
    messageDiv.appendChild(messageInfo);
    messageDiv.appendChild(messageBubble);
    
    messageContainer.appendChild(messageDiv);
    scrollToBottom();
}

// 显示系统消息
function displaySystemMessage(message) {
    const messageDiv = document.createElement('div');
    messageDiv.className = 'message system';
    
    const messageBubble = document.createElement('div');
    messageBubble.className = 'message-bubble';
    
    // 处理消息中的表情符号
    if (window.emojiUtils && window.emojiUtils.formatMessageWithEmojis) {
        messageBubble.innerHTML = window.emojiUtils.formatMessageWithEmojis(message);
    } else {
        messageBubble.textContent = message;
    }
    
    messageDiv.appendChild(messageBubble);
    
    messageContainer.appendChild(messageDiv);
    scrollToBottom();
}

// 滚动到底部
function scrollToBottom() {
    messageContainer.scrollTop = messageContainer.scrollHeight;
}

// 初始化应用
init();